<template>
  <div class="menger">
    <header class="empHeader">员工管理</header>
    <hr style="margin-top: 20px" />
    <div class="body">
      <el-dialog width="30%" :title="isShow==0?'添加员工':'修改员工'" :visible.sync="dialogVisible">
        <span>
                员工用户名：<el-input style="width:30vh;margin-right:15px" placeholder="请输入员工用户名" v-model="empInfo.ename"/><br>
                员工密码：<el-input type="password" style="width:30vh" placeholder="请输入员工密码" v-model="empInfo.epass"/><br>
                员工姓名：<el-input style="width:30vh" placeholder="请输入员工姓名" v-model="empInfo.realname"/><br>
                员工性别：<el-radio v-model="empInfo.esex" :label="0">男</el-radio>
                         <el-radio v-model="empInfo.esex" :label="1">女</el-radio><br>
                员工职位：  <el-select v-model="empInfo.position" placeholder="请选择">
                              <el-option
                                v-for="item in dataPositon"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                              </el-option>
                            </el-select><br>
                员工底薪：<el-input style="width:30vh" placeholder="请输入员工底薪" v-model="empInfo.sal"/><br>
                所属部门：<el-select v-model="empInfo.did" placeholder="请选择">
                              <el-option
                                v-for="item in dataDept"
                                :key="item.did"
                                :label="item.dname"
                                :value="item.did" >
                              </el-option>
                          </el-select>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button type="info"  @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrEditEmp">确 定</el-button>
        </span>
      </el-dialog>
      <el-button @click="isAll(0)" type="primary"><i class="el-icon-plus"></i>新增</el-button>
      <el-button @click="empCurrent" type="primary"><i class="el-icon-s-custom"></i> 在职员工</el-button>
      <el-button @click="empDnotCurrent" type="primary"><i class="el-icon-s-custom"></i> 离职员工</el-button>
    </div>
    <div class="body">
      <el-input v-model="likeName" style="width:300px; position: relative; bottom:10px;left:500px" placeholder="请输入用户姓名"></el-input>
      <el-button style="position:relative;left:860px" type="primary" @click="searchLikeName">搜索</el-button>
    </div>
    <el-table :data="dataEmp" style="width: 100%" border >
      <el-table-column prop="eid" label="ID" width="80px"></el-table-column>
      <el-table-column prop="ename" label="用户名" width="150px"></el-table-column>
      <el-table-column prop="realname" label="姓名" width="150px"></el-table-column>
      <el-table-column label="性别" width="100px">
        <template slot-scope="{row}">
          <el-tag effect="dark" :type="row.esex==0?'success':'danger' ">{{row.esex==0?'男':'女'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="use==0?'入职时间':'离职时间'" width="150px" :formatter="empTimeEntry"></el-table-column>
      <el-table-column label="职位" width="100px" :formatter="empPosition"></el-table-column>
      <el-table-column prop="sal" label="底薪" width="100px"></el-table-column>
      <el-table-column label="员工状态" width="100px" :formatter="empUseOrNotUse"></el-table-column>
      <el-table-column prop="dname" label="所属部门" width="100px"></el-table-column>
      <el-table-column label="操作" width="width">
        <template slot-scope="{row}">
          <div v-if="use == 0">
             <el-button style="color:royalblue" icon="el-icon-edit" @click="editEmp(row)">编辑</el-button> 
             <el-button style="color:red" icon="el-icon-delete" @click="deleteEmp(row.eid)">删除</el-button>  
          </div>
          <div v-else>
              <el-button style="color:darkcyan" icon="el-icon-check" @click="dontDeleteEmp(row.eid)">撤销</el-button>  
          </div>
        </template>

      </el-table-column>
    </el-table>
        <!-- 分页器 -->
    <el-pagination
      style="margin-top:8px"
      background
      layout="prev, pager, next, jumper, ->, total"
      :page-size="limit"
      :current-page="page"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name:'emp',
  data() {
    return {
      dialogVisible:false,
      dataEmp:[],
      page:1,
      limit:5,
      total:0,
      //控制添加还是修改员工
      isShow:-1,
      //部门的信息
      dataDept:[],
      empInfo:{
        ename:'',
        epass:'',
        realname:'',
        esex:'',
        position:'',
        sal:'',
        did:''
      },
      //职位
      dataPositon:[
        {name:'董事长',id:0},
        {name:'总监',id:1},
        {name:'经理',id:2},
        {name:'员工',id:3},
      ],
      //控制员工状态
      use:0,
      //用于模糊查询
      likeName:'',
    }
  },
  methods: {
    //获取员工所有信息
    async empUserInfo(){
      const {page,limit} = this
      const result = await this.$API.reqEmpUserInfo(page,limit)
      if (result.status == 0) {
        this.dataDept = result.deptInfo
        this.dataEmp = result.data
        this.page = result.page
        this.limit = result.limit
        this.total = result.total
        this.use = result.use
      }
    },
    //在职员工
    empCurrent(){
      this.empUserInfo()
    },
    //离职员工
    async empDnotCurrent(){
      this.page = 1
      const {page,limit} = this
      const result = await this.$API.reqSelectDnotUseEmp(page,limit)
      if (result.status == 0) {
        this.dataDept = result.deptInfo
        this.dataEmp = result.data
        this.page = result.page
        this.limit = result.limit
        this.use = result.use
        this.total = result.total
      }
    },
    //处理状态函数
    empUseOrNotUse(row){
      if (row.estatus == 0) {
        return '在职'
      }else{
        return '离职'
      }
    },
    //处理入职时间函数
    empTimeEntry(row){
      if (row.estatus == 0) {
        return (row.entrydate || '').split('T')[0]
      }else{
        return (row.leavedate || '').split('T')[0]
      }
    },
    //处理员工职位函数
    empPosition(row){
      if (row.position == 0) {
        return '董事长'
      }else if(row.position == 1){
        return '总监'
      }else if(row.position == 2){
        return '经理'
      }else{
        return '员工'
      }
    },
    //处理分页功能
    handleCurrentChange(page){
      this.page = page
      this.empUserInfo()
    },
    //添加员工
    isAll(show){
      this.empInfo= {}
      this.isShow = show
      this.dialogVisible = true
    },
    //编辑员工
    editEmp(row){
      this.isShow = row.eid
      this.dialogVisible = true
      this.empInfo = {...row}
    },
    //确定添加还是修改员工
    async addOrEditEmp(){
      this.dialogVisible = false
      const dataEmp = this.empInfo
      //添加
      if (this.isShow == 0) {
        const date = new Date()
        //获取当前年
        var nowYear = date.getFullYear();
        //获取当前月
        var nowDay = date.getDate();
        //获取当前日
        var nowMonth = date.getMonth()+1
        const entrydate = nowYear+'-'+nowMonth+'-'+nowDay
        const emp = {...dataEmp,entrydate}
        const result = await this.$API.reqAddEmp(emp)
        if (result.status == 0) {
          this.$message.success(result.message)
          this.empUserInfo()
        }else{
          this.$message.error(result.message)
        }
      }else{
        //修改
        //删除对象属性，方式一：
        // delete dataEmp.dname
        // delete dataEmp.dstatus
        // delete dataEmp.duty
        // delete dataEmp.credate
        //方式二：
        this.$delete(dataEmp,'dname')
        this.$delete(dataEmp,'dstatus')
        this.$delete(dataEmp,'duty')
        this.$delete(dataEmp,'credate')
        this.$delete(dataEmp,'entrydate')
        const result = await this.$API.reqEditEmp(dataEmp)
        if (result.status == 0) {
          this.$message.success(result.message)
          this.empUserInfo()
        }else{
          this.$message.error(result.message)
        }
      }

    },
    //删除
    async deleteEmp(eid){
      const result = await this.$API.reqDeleteEmp(eid)
      if (result.status == 0) {
        this.$message.success(result.message)
        this.empUserInfo()
      }else{
        this.$message.error(result.message)
      }
    },
     //撤销删除
    async dontDeleteEmp(eid){
      const result = await this.$API.reqDontDeleteEmp(eid)
      if (result.status == 0) {
        this.$message.success(result.message)
        this.empDnotCurrent()
      }else{
        this.$message.error(result.message)
      }
    },
    //模糊查询
    async searchLikeName(){
      //方式一
      // this.page = 1
      // const {page,limit,likeName} = this
      // const likeSelect = {page,limit,likeName}
      // const result = await this.$API.reqFuzzySelect(likeSelect)
      // console.log(result)
      if (this.use == 0) {
        //方式二
        this.page = 1
        const {page,limit} = this
        const likeName = {likeName:this.likeName}
        const result = await this.$API.reqFuzzySelect(page,limit,likeName)
        if (result.status == 0) {
          this.dataEmp = result.data
          this.page = result.page
          this.limit = result.limit
          this.total = result.total
        }else{
          this.$message.info(result.message)
        }
        this.likeName = ''
      }else{
        //方式二
        this.page = 1
        const {page,limit} = this
        const likeName = {likeName:this.likeName}
        const result = await this.$API.reqDnotFuzzySelect(page,limit,likeName)
        if (result.status == 0) {
          this.dataEmp = result.data
          this.page = result.page
          this.limit = result.limit
          this.total = result.total
        }else{
          this.$message.info(result.message)
        }
        this.likeName = ''
      }

    }
  },
  mounted() { 
    this.empUserInfo()
  },
}
</script>

<style>
.menger {
  margin: 0;
  padding: 0;
}
.empHeader{
  display: flex;
  font-size: 25px;
  font-weight: bolder;
  color: rgb(11, 11, 236);
}
.body{
  margin-top: 20px;
  height: 50px;
  float: left;

}
.el-button {
  display: flex;
  float: left;
  margin-left: 10px;
}
.el-input {
  margin-left: 10px;
  margin: 10px 0px;
}
.dialog-footer{
  display: flex;
  flex-direction: row-reverse;
}
.el-pagination__jump{
  position: relative;
  bottom: 10px;
}
.el-radio{
  margin:0px 35px
}
</style>